<!--
 * @Description: 
 * @Date: 2024-04-15 08:53:50
 * @LastEditTime: 2024-11-01 16:31:37
-->
<template>
  <div class="contact">
    <div class="contact-top"></div>
    <div class="contact-content">
      <div class="item1">
        <div class="item-title">联络站统计</div>
        <div class="item1-msg">
          <div>
            <div>{{csName}}</div>
            <div>
              <span>
                <CountTo
                  :startVal="0"
                  :endVal="Number(num) > 10 ? Math.floor(Number(num) / 10) : 0"
                  :duration="4000"
              /></span>
              <span>
                <CountTo
                  :startVal="0"
                  :endVal="Number(num) > 10 ? Number(num) % 10 : Number(num)"
                  :duration="4000"
              /></span>
            </div>
          </div>
        </div>
        <div class="item1-msg1" v-for="(item,index) in leftData" :key="index">
          <div>
            <div>{{item.title}}</div>
            <div>
              <span>
                <CountTo
                  :startVal="0"
                  :endVal="Number(item.sunNumber) > 10 ? Math.floor(Number(item.sunNumber) / 10) : 0"
                  :duration="4000"
              /></span>
              <span>
                <CountTo
                  :startVal="0"
                  :endVal="Number(item.sunNumber) > 10 ? Number(item.sunNumber) % 10 : Number(item.sunNumber)"
                  :duration="4000"
              /></span>
            </div>
            <div>人</div>
          </div>
          <div style="display:flex">
            <div>
                <p>市人大</p>  
                <span>
                <CountTo
                  :startVal="0"
                  :endVal="item.num1"
                  :duration="4000"
              /></span>      
            </div> 
            <div>
                <p>区人大</p>  
                <span>
                <CountTo
                  :startVal="0"
                  :endVal="item.num2"
                  :duration="4000"
              /></span>     
            </div> 
            <div>
                <p>乡(镇)人大</p>  
                <span>
                <CountTo
                  :startVal="0"
                  :endVal="item.num3"
                  :duration="4000"
              /></span>     
            </div> 
            <!-- <div v-for="item in areaList" :key="item.id">
              <span>{{ item.name }}</span>
              <span>{{ item.count }}</span>
              <div>
                <el-progress
                  :text-inside="true"
                  :stroke-width="10"
                  :percentage="(item.count / num) * 100"
                  :show-text="false"
                ></el-progress>
              </div>

              <span>{{ Number( (item.count / num) * 100).toFixed(1) }}%</span>
            </div> -->
          </div>
        </div>
      </div>
      <div class="item2">
        <div class="item2-top">
          <div class="item-title">驻站代表</div>
          <div class="item2-msg">

            <div class="item2-user">
              <vue-seamless-scroll
                v-if="tableList.length > 0"
                :data="tableList"
                style="
                  width: 100%;
                  height: 100%;
                  overflow: hidden;
                  white-space: nowrap;
                "
                :class-option="classOption1"
              >
                <div class="user-info" v-for="item in tableList" :key="item.id">
                  <img :src="baseUrl + item.avatar" />
                  <div>
                    <p>{{ item.userName }}</p>
                    <p>{{ item.post ? item.post : "暂无" }}</p>
                    <span>接待次数 暂无</span>
                  </div>
                  <img :src="item.qrurl" class="user-qr" @click="skip(item)" />
                </div>
              </vue-seamless-scroll>
              <div
                v-else
                style="width: 100%; display: flex; justify-content: center"
              >
                <el-empty
                  :image="require('../../../assets/images/null.png')"
                  description="暂无数据"
                ></el-empty>
              </div>
            </div>
          </div>
        </div>
        <div class="item2-bottom">
          <div class="item-title">群众问题</div>
          <div class="item2-table">
            <div class="scroll_table">
              <div
                style="
                  display: inline-flex;
                  width: 100%;
                  height: 100%;
                  flex-direction: column;
                "
              >
                <el-table
                  :data="columns"
                  class="table"
                  id="contactTable"
                  style="flex: none"
                >
                  <el-table-column
                    v-for="(item, index) in columns"
                    :key="index + 'i'"
                    :label="item.label"
                    :prop="item.prop"
                    align="center"
                  />
                </el-table>
                <vue-seamless-scroll
                  :data="wenTiList"
                  class="seamless-warp"
                  style="width: 100%"
                  :class-option="classOption"
                  v-if="wenTiList.length > 0"
                >
                  <el-table
                    :data="wenTiList"
                    class="table_scroll"
                    @row-click="handleItemClick"
                  >
                    <el-table-column
                      v-for="(item, index) in columns"
                      :key="index + 'i'"
                      :label="item.label"
                      :prop="item.prop"
                      align="center"
                      :show-overflow-tooltip="true"
                    />
                  </el-table>
                  <el-table :data="wenTiList" class="table_scroll">
                    <el-table-column
                      v-for="(item, index) in columns"
                      :key="index + 'i'"
                      :label="item.label"
                      :prop="item.prop"
                      align="center"
                      :show-overflow-tooltip="true"
                    />
                  </el-table>
                </vue-seamless-scroll>
                <div
                  v-else
                  style="
                    width: 100%;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <el-empty
                    :image="require('../../../assets/images/null.png')"
                    description="暂无数据"
                  ></el-empty>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <img
      class="goBack"
      @click="
        () => {
          this.$router.go(-1);
        }
      "
      src="../../../assets/images/digitzation/back.png"
    />
    <!-- 简介弹窗 -->
    <profileDialog :visible.sync="profileVisible" />
  </div>
</template>

<script>
import CountTo from "vue-count-to";
import autofit from "autofit.js";
import QRCode from "qrcode";
import vueSeamlessScroll from "vue-seamless-scroll";
import { addManageList } from "@/api/dbxx/dbxxManage";
import { listData } from "@/api/system/dict/data";
import {
  listQuestion,
  contactStationList,
} from "@/api/digitization/home/index";
import profileDialog from "./profileDialog.vue";
import { delData } from "@/api/system/dict/data";
export default {
  data() {
    return {
      columns: [
        { prop: "title", label: "问题", minWidth: "600", sort: true },
        { prop: "type", label: "问题类型", minWidth: "100", sort: true },
        { prop: "name", label: "留言人", minWidth: "100", sort: true },
        { prop: "status", label: "留言状态", minWidth: "100", sort: true },
        { prop: "userId", label: "留言代表", minWidth: "100", sort: true },
        { prop: "userId", label: "处理结果", minWidth: "100", sort: true },
      ],
      tableList: [],
      wenTiList: [],
      areaList: [],
      num: 0,
      csName: null,
      baseUrl: process.env.VUE_APP_BASE_API,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      profileVisible: false,
      leftData:[
        {
          title:'河庄坪镇人大代表联络站',
          num1:2,
          num2:8,
          num3:52,
          sunNumber:62
        },
        {
          title:'冯庄乡人大代表联络站',
          num1:2,
          num2:10,
          num3:52,
          sunNumber:64
        },
        {
          title:'向阳社区人大代表联络站',
          num1:5,
          num2:9,
          num3:32,
          sunNumber:56
        }
      ]
    };
  },
  components: {
    vueSeamlessScroll,
    profileDialog,
    CountTo,
  },
  methods: {
    skip(item) {
      this.$router.push({
        path: "/userH5",
        query: {
          id: item.userId,
          csName: this.csName,
          userName: item.userName,
        },
      });
    },
    handleItemClick(data, index, e) {
      this.profileVisible = true;
    },
  },
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        // limitMoveNum: this.wenTiList.length, // 开始无缝滚动的数据量 this.tableList
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    classOption1() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        // limitMoveNum: this.tableList.length, // 开始无缝滚动的数据量 this.tableList
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    autofit.init({
      dh: 1080,
      dw: 1920,
      el: ".contact",
      resize: true,
    });
   
    this.csName = this.$route.query.name;
    addManageList({ csId: this.$route.query.id }).then((res) => {
      res.rows.length > 0 &&
        res.rows.forEach(
          async (item) =>
            (item.qrurl = await QRCode.toDataURL(
              `http://36.139.241.126:8092/userH5?id=${item.userId}`
            ))
        );
      this.tableList = res.rows;
      this.num = this.leftData.length;
    });
    listQuestion({ csId: this.$route.query.id }).then((res) => {
      this.wenTiList = res.rows;
    });
    listData({ dictType: "sys_area_type" }).then((dict) => {
      contactStationList().then((res) => {
        let dataArr = dict.rows.map((item) => {
          return {
            id: item.dictValue,
            name: item.dictLabel,
            count: 0,
          };
        });

        res.rows.forEach((mapItem) => {
          let index = dataArr.findIndex((item) => item.id == mapItem.area);

          if (index !== -1) {
            dataArr[index].count += 1;
          }
        });

        this.areaList = dataArr;
        console.log(this.areaList, 8989);
      });
    });
  },
};
</script>
<style lang="scss" scoped>
.contact {
  width: 100%;
  height: 100%;
  background: #021132;
  display: flex;
  flex-direction: column;
  &-top {
    width: 100%;
    height: 50px;
  }
  &-content {
    width: 100%;
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
    & > div:nth-child(1) {
      height: 100%;
      width: 25%;
      margin-right: 20px;
      //display: flex;
      gap:20px;
      //flex-direction: column;
      background: url("../../../assets/images/digitzation/center2.png");
      background-size: 100% 100%;
      padding: 20px;
      box-sizing: border-box;
      overflow: auto;
      &::-webkit-scrollbar-track {
  background: #021132;
}

&::-webkit-scrollbar-thumb {
  background: #3486da;
}
&::-webkit-scrollbar-thumb:hover {
  background: #fff;
}
      .item1-msg {
        width: 100%;
       
        display: flex;
        overflow: hidden;
        flex-direction: column;
        & > div:nth-child(1) {
          padding: 40px 0;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          & > div:nth-child(1) {
            font-size: 24px;
            margin-right: 20px;
          }
          & > div:nth-child(2) {
            display: flex;
            & > span {
              display: inline-block;
              background-image: url("../../../assets/images/digitzation/card.png");
              background-size: 100% 100%;
              margin-right: 10px;
              width: 60px;
              height: 80px;
              font-size: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
        & > div:nth-child(2) {
          display:flex;
          gap: 30px;
          &>div{
            flex:1;
            border-radius: 5px;
            border: 1px solid #3052ae;
            color:#fff;
            display: flex;
            flex-direction: column;
             align-items: center;
             padding: 10px 0;
             
             & > p:nth-child(1){
              font-size:24px;
              margin-bottom:20px;
              
              
             }
             & > span:nth-child(2){
              color: #fff;
               font-size: 26px;
                 font-weight: bold;
             }
           
          }
        }

      }
      .item1-msg1{
        width: 100%;
       
       display: flex;
       overflow: hidden;
       flex-direction: column;
       margin-bottom: 30px;
       & > div:nth-child(1) {
         padding: 10px 0;
         display: flex;
         justify-content: center;
         align-items: center;
         color: #fff;
         background: #3053AE;
         margin-bottom: 20px;
         & > div:nth-child(1) {
           font-size: 24px;
        
         }
         & > div:nth-child(2) {
           display: flex;
           margin:0  20px;
           & > span {
            font-size: 40px;
           }
         }
         & > div:nth-child(3) {
           font-size: 24px;
           margin-right: 20px;
         }
       }
       & > div:nth-child(2) {
         display:flex;
         gap: 30px;
         &>div{
           flex:1;
           border-radius: 5px;
           border: 1px solid #3052ae;
           color:#fff;
           display: flex;
           flex-direction: column;
            align-items: center;
            padding: 10px 0;
            
            & > p:nth-child(1){
             font-size:24px;
             margin-bottom:20px;
             
             
            }
            & > span:nth-child(2){
             color: #0ADBFA;
              font-size: 26px;
                font-weight: bold;
            }
          
         }
       }
      }
    }
    & > div:nth-child(2) {
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      overflow: hidden;
      & > div {
        width: 100%;
        background: url("../../../assets/images/digitzation/center2.png")
          no-repeat;
        background-size: 100% 100%;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      & > div:nth-child(2) {
        flex: 1;
      }
      .item2-top {
        height: 40%;
        margin-bottom: 20px;
        & > div:nth-child(2) {
          width: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          h3 {
            color: #fff;
            padding: 20px 0;
          }
          .item2-user {
            flex: 1;
            display: flex;
            padding: 20px 30px;
            box-sizing: border-box;
            overflow: hidden;
            .user-info {
              height: 280px;
              display: inline-flex;
              position: relative;
              margin-right: 10px;
              img {
                width: 200px;
                height: 100%;
                margin-right: 20px;
                object-fit: cover;
              }
              & > div {
                width: 150px;
                padding: 20px 0;
                color: #fff;
                display: flex;
                font-size: 18px;
                flex-direction: column;
                justify-content: space-between;
                overflow: hidden;
                & > span:last-child {
                  padding: 3px 5px;
                  background: #3053af;
                  width: max-content;
                }
                & > p {
                  white-space: pre-wrap;
                }
              }
              .user-qr {
                position: absolute;
                bottom: 0px;
                right: 150px;
                width: 60px;
                height: 60px;
                object-fit: cover;
              }
            }
          }
        }
      }
      .item2-bottom {
        .item2-table {
          width: 100%;
          flex: 1;
          background: #fff;
          overflow: hidden;
          .scroll_table {
            width: 100%;
            height: 100%;
            background: #021132;
            display: flex;
            ::v-deep .table .el-table__body-wrapper {
              display: none;
              background: #000;
            }
            ::v-deep .el-table__body {
              width: 100% !important;
            }
            ::v-deep .el-table {
              background: transparent;
              color: #fff;
              border: none !important;
            }
            ::v-deep .el-table::before {
              display: none;
            }
            ::v-deep .el-table_expanded-cell {
              background: transparent;
              color: #fff;
              border: none !important;
            }
            ::v-deep .el-table th {
              background: transparent;
              color: #fff;
              border: none !important;
            }
            ::v-deep .el-table thead th {
              font-size: 24px;
            }
            ::v-deep .el-table tr {
              background: transparent;
              color: #fff;
              font-size: 18px;
              border: none !important;
            }
            ::v-deep .el-table td {
              background: transparent;
              color: #fff;
              border: none !important;
            }
            ::v-deep .el-table td.el-table__cell div {
              width: 100% !important;
            }

            // 重点注意这段样式
            .seamless-warp {
              flex: 1;
              overflow: hidden;
              ::v-deep .table_scroll .el-table__header-wrapper {
                display: none;
                background: transparent;
              }
            }
          }
        }
      }
    }
    .item-title {
      width: 100%;
      height: 30px;
      font-size: 18px;
      line-height: 30px;
      color: #fff;
      padding-left: 10px;
      background: url("../../../assets/images/digitzation/line.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  ::v-deep .el-empty__description p {
    color: #3486da;
  }
}
</style>
